<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/tools/dialog/src/dialog.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/tools/dialog/src/dialog.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>  
 
  &lt;div :class="classes" ref="dialog"   :style="{'width': dialogW + 'px', 'height': dialogH + 'px','left': styleLeft + 'px', 'top': styleTop + 'px', 'z-index': zIndex}" @click.stop="_mDownCtrl">
    &lt;i class="xdh-map-dialog__close" @click.stop="closeHandle" v-if="showClose">&lt;/i>
    &lt;div class="xdh-map-dialog__header"  @mousedown="mouseDownHandle" v-if="header"
    >{{title}}&lt;/div>
    &lt;div class="xdh-map-dialog__body">
      &lt;slot>&lt;/slot>
    &lt;/div>
    &lt;div class="xdh-map-dialog__bottom" v-if="bottom">
      &lt;slot name="bottom">&lt;/slot>
    &lt;/div>
  &lt;/div>
 
&lt;/template>


&lt;script>
  /**
   * dialog 地图内置弹窗
   * @module xdh-map-dialog
   */
    
  // import {getParent} from 'utils/util'
   /**
   * 插槽
   * @member slots
   * @property {string} bottom 定义底部内容
   * @property {string} default 定义主体内容
   * 
   */

  export default {
    name: 'xdh-map-dialog',
    /**
    * 参数属性
    * @member props
    * @property {boolean} closed 定义关闭变量
    * @property {string} posStyle 定义弹窗left/top/right/bottom/width/height 的css字符串
    * @property {string} title 弹窗标题
    * @property {boolean} bottom 是否显示底部
    * @property {array} position dialog 右上角原点 相对 地图 右上角原点的偏移值(px)
    * @property {HTMLNode} warp dialog 所在的定位容器 （通常与xdh-map-warp结合使用，为xdh-map-warp的$el）
    * @property {boolean} animate 是否启用动画
    * @property {boolean} header 是否显示头部
    * @property {boolean} showClose 是否关闭按钮
    * @property {array} hideAt 弹窗隐藏时归位到容器某个位置
    */
    props: {
      posStyle: {
        type: String,
        default: 'left: 0px; top:0px; width: 300px; height: 300px;'
      },
      closed: {
        type: Boolean,
        default: true
      },
      
      header: {
        type: Boolean,
        default: true
      },
      title: {
        type: String,
        default: '标题'
      },
      bottom: {
        type: Boolean,
        default: false
      },
      warp: {},
      animate: {
        type: Boolean,
        default: false
      },
      hideAt: {
        type: Array,
        default: () => { return [0, 0] }
      }, 
      theme: {
        type: String,
        default: ''
      },
      showClose: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        currentClosed: this.closed, 
        dialog: null,

        width: 0,
        height: 0,
        left: 0,
        top: 0,

        dialogW: 0,
        dialogH: 0,

        styleLeft: 0,
        styleTop: 0, 

        startX: 0,
        startY: 0,
        
        mouseDownFlag: false,
        field: this.warp,
        zIndex: 1,
        transition: this.animate ? 'all 0.3s' : '',
        closedPos: null
      }
    },
    computed: {
      classes() {
        return this.theme ? ['xdh-map-dialog', `is-${this.theme}`] : ['xdh-map-dialog']
      }
    },
    inject: ['dialogLayer'],
    watch: {
      closed(val) { 
        if (val) { 
          this._close()
        } else {
          this._open()
        }
        this.currentClosed = val
      },
      posStyle(val) {
        if (!this.field) {
          this.field = this.definePositionWarp(this.$el)
        } else {
          this._initDialogPos()
        }
      },
      hideAt(val) {
        if (this.closed) {
          if (this.hideAt &amp;&amp; this.hideAt.length) {
            this.styleLeft = this.hideAt[0]
            this.styleTop = this.hideAt[1]
          }
        }
      }
    },
    methods: {
      _close() {
        this.left = this.styleLeft
        this.top = this.styleTop
        this.$nextTick(() => {
          this.dialogW = 0
          this.dialogH = 0
          // ------------
          if (this.hideAt &amp;&amp; this.hideAt.length) {
            this.styleLeft = this.hideAt[0]
            this.styleTop = this.hideAt[1]
          }
        })
        
      },
      _open() {
        this.dialogW = this.width
        this.dialogH = this.height 
        
        this.styleLeft = this.left
        this.styleTop = this.top
          
        this._mDownCtrl()
      },
      closeHandle() {
        this.currentClosed = true 
        this.$emit('on-closed')
        this.$emit('update:closed', this.currentClosed)
      },
      mouseDownHandle(e) { 
        this.left = this.styleLeft
        this.top = this.styleTop

        this.dialog.style.transition = '' // this.transition
        this.startX = e.clientX
        this.startY = e.clientY
        this.mouseDownFlag = true

        this._mDownCtrl()
        this.$emit('on-mouseDown', this.styleLeft, this.styleTop)
      },
      mouseMoveHandle(e) {
        if (!this.mouseDownFlag) return
        let dirX = e.clientX - this.startX
        let dirY = e.clientY - this.startY
        
        this.styleLeft = this.left + dirX
        this.styleTop = this.top + dirY

        let minX = 0
        let minY = 0
        let maxX = this.field.offsetWidth - this.dialog.offsetWidth
        let maxY = this.field.offsetHeight - this.dialog.offsetHeight
        
        if (this.styleLeft &lt;= minX) {
          this.styleLeft = minX
        } else if(this.styleLeft >= maxX) {
          this.styleLeft = maxX
        }
        if (this.styleTop &lt;= minY) {
          this.styleTop = minY
        } else if(this.styleTop >= maxY) {
          this.styleTop = maxY
        }
      },
      mouseUpHandle(e) {
        this.mouseDownFlag = false
        this.dialog.style.transition = this.transition 
        this.$emit('on-mouseUp', this.styleLeft, this.styleTop)
      },
      definePositionWarp(dom) {
        let parent = dom.parentNode
        let positionStyle = window.getComputedStyle(parent, false)['position']
        if (positionStyle === 'relative' || positionStyle === 'absolute' || parent.tagName === 'BODY') {
          return parent
        } else {
          this.definePositionWarp(parent)
        }
      },
      _mDownCtrl() {
        if (this.$parent.$options.name !== 'xdh-map-warp') return
        let otherDialogs = this.$parent.setDialogsSeries(this)
        otherDialogs.forEach((vm, index) => { vm._setIndex(otherDialogs.length - index) }) 
      },
      _setIndex(index) {
        this.zIndex = index * this.dialogLayer
      },
      
      _initDialogPos() {
        let div = document.createElement('DIV')
        div.style = 'position:absolute;' + this.posStyle
        this.field.appendChild(div)
        
        this.width = div.offsetWidth
        this.height = div.offsetHeight
        this.left = div.offsetLeft
        this.top = div.offsetTop

        

        if (!this.closed) {
          this.styleLeft = div.offsetLeft
          this.styleTop = div.offsetTop

          this.dialogW = div.offsetWidth
          this.dialogH = div.offsetHeight
        }
        this.field.removeChild(div)
      }
      
    },
    created() {
       
    },
    mounted() { 

      
      this.dialog = this.$refs.dialog 
      this.dialog.style.transition = this.transition
      
      if (!this.field) {
        this.field = this.definePositionWarp(this.$el)
        this._initDialogPos()
      }

      

      if (this.$parent.$options.name === 'xdh-map-warp') {
        this.$parent.registerDialog(this)
      }
       
      
      

      this.mouseMoveHandleProxy = this.mouseMoveHandle.bind(this)
      this.mouseUpHandleProxy = this.mouseUpHandle.bind(this)
      document.body.addEventListener('mousemove', this.mouseMoveHandleProxy)
      document.body.addEventListener('mouseup', this.mouseUpHandleProxy)


    },
    beforeDestroy() {
      document.body.removeEventListener('mousemove', this.mouseMoveHandleProxy)
      document.body.removeEventListener('mouseup', this.mouseUpHandleProxy)
    }
  }
&lt;/script>

&lt;style lang="scss" scoped>
/* 
@import "../../../../theme/_vars";
.xdh-map-dialog{
  display: flex;
  flex-flow: column;
  position: absolute;
  background: $--dialog-bg;
  color: $--dialog-light-color;
  box-shadow: $--shadow-base; // 0 0 8px 0 rgba(0, 0, 0, .5);
  overflow: hidden;
 
  &amp;__header {
    flex: 0 0 30px;
    height: 30px;
    background: $--dialog-title-bg-light;
    line-height: 30px;
    padding: 0 5px;
    cursor: move;
  }
  &amp;__close {
    background: url(../../../../sources/popup/close.png);
    background-size: contain;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    top: 0;
    right: -3px;
    opacity: 0.7;
    cursor: pointer;
    &amp;:hover {
      opacity: 1;
    }
  }
 
  &amp;__body {
    flex: 1;
    position: relative;
    width: 100%;
  }
  &amp;__bottom{
    flex: 0 0 auto;
    padding: 2px 0;
    border-top: 1px solid $--border-color-base;
  }
 
   
  &amp;.is-dark {
    .xdh-map-dialog__header {
      color: $--dialog-dark-color;
      background: $--dialog-title-bg-dark;
    }
    .xdh-map-dialog__close {
      background: url(../../../../sources/popup/close_dark.png);
    }
  }
}  
*/
&lt;/style></code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-dialog.html">xdh-map-dialog</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-draw-arc.html">xdh-map-draw-arc</a></li><li><a href="module-xdh-map-draw-panel.html">xdh-map-draw-panel</a></li><li><a href="module-xdh-map-drawdown.html">xdh-map-drawdown</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-geo-layer.html">xdh-map-geo-layer</a></li><li><a href="module-xdh-map-group.html">xdh-map-group</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-panel.html">xdh-map-panel</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-warp.html">xdh-map-warp</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li><li><a href="module-xdh-map-zoom-panel.html">xdh-map-zoom-panel</a></li></ul><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-geo-layer.html#~event:mouseEnter">mouseEnter</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw">on-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw-end">on-draw-end</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-edit-start">on-edit-start</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-draw">on-finish-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-edit">on-finish-edit</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-inited">on-inited</a></li><li><a href="module-xdh-map-measure.html#~event:on-measureEnd">on-measureEnd</a></li><li><a href="module-xdh-map-drawdown.html#~event:on-toggle">on-toggle</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Sat Mar 21 2020 16:40:44 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
